<template>
<div class="layout">
	<Row>
		<Col span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner10"></div>
		</Col>

		<Col span="6">
			<Input v-model="key" clearable>
				<Select v-model="filterKey" slot="prepend" style="width: 80px">
					<Option v-for="item in keyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				</Select>
			</Input>
		</Col>
		<Col span="3">
			<Input v-model="realname" clearable placeholder="请填写用户名称" readonly :style="{paddingLeft:'15px'}">
				<Icon type="md-search" slot="suffix" @click.native="onSelectUser"></Icon>
			</Input>
		</Col>
		<Col span="3">
			<Select  clearable  placeholder="请选择状态" v-model="statusKey" :style="{paddingLeft:'15px'}">
				<Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
		</Col>
		<Col span="8">
			<span :style="{paddingLeft:'15px'}"></span>
			<Button type="primary" @click="search">搜索</Button>
			<Button type="info" @click="init()"><Icon type="md-refresh" :size="16"/></Button>
		</Col>
		<Col span="4">
			<div style="text-align:right">
				<Button type="primary" icon="md-add" :to='{"name":"wallet-recharge-create"}'>人工充值</Button>
			</div>
		</Col>

		<Col span="24">
			<div class="cleaner10"></div>
			<Table ref="vTable" :loading="tableLoading" border stripe :columns="columns" :data="vData.data">
				<!-- 操作 -->
				<template slot="action" slot-scope="props">
					<Button type="success" size="small" @click.native="onRowEdit(props.params.row.id)">编辑</Button>

					<Button type="primary" size="small"  @click.native="changeStatus(props.params.row.id,1,props.params.index)"
					:style="{display:0==props.params.row.status|| 2==props.params.row.status?'inline-block':'none'}">成功</Button>

					<Button type="warning" size="small" @click.native="changeStatus(props.params.row.id,2,props.params.index)"
					:style="{display:1==props.params.row.status?'inline-block':'none'}">失败</Button>

					<Button type="error" size="small" ghost @click.native="onRowDelete(props.params.row.id,props.params.index)">删除</Button>
				</template>
			</Table>
			<div class="cleaner10"></div>
			<Page @on-page-size-change="changePageSize" @on-change="changePage" :total="vData.total" :page-size="vData.pageSize" :current.sync="vData.page" :transfer="true" show-elevator show-sizer></Page>
		</Col>
	</Row>

	<Listener-Selector  :show.sync="showBox" @on-hide="showBox=false" @on-change="onListenerChange"></Listener-Selector>
	
</div>
</template>
<script>
// 引入子组件
import ListenerSelector from '@/components/ListenerSelector/ListenerSelector.vue'
import {mapState,mapGetters} from 'vuex'
import { Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input } from 'iview';
import { isNullOrUndefined } from 'util';
export default { 
	name:'wallet-recharge-index',
	components: {ListenerSelector,Avatar, Modal, Row, Col, Table, Button, Page, Breadcrumb, BreadcrumbItem, Icon, Select, Option, Input},
	data () {
		return {
			title:'充值管理',
			tableLoading:true,
			realname:null,
			vData:[],
			showBox:false,
			statusKey:'',
			statusList: [
				{value: 0,label: '待支付'},
				{value: 1,label: '已到账'},
				{value: 2,label: '充值失败'},
			],
			paymentList:[{value: "0",label:'人工充值'}],
			filterKey:'',
			key:'',
			keyList: [
				{value: 'money',label: '充值金额'},
				{value: 'memo',label: '备注'},
				{value: 'order_no',label: '订单号'},
				{value: 'payment_name',label: '渠道名称'},
			],
			columns:[
				{title: '编号',key: 'id',width: 90,fixed: 'left'},
				{title: '订单号',key: 'order_no'},
				{title: '真实姓名',key: 'realname'},
				{title: '状态',key: 'status',
					render: (h, params) => {
						let _status=['待支付','已到账','充值失败']
						return h('div',[
							h('span', {
							class: 1==params.row.status?'success':(2==params.row.status?'warning':(3==params.row.status?'error':'draft')),
						}, _status[params.row.status]),
						])
					}
				},
				{title: '充值金额',key: 'money'},
				{title: '渠道名称',key: 'payment_id',
					render: (h, params) => {
						let _payment_name='12';
						this.paymentList.forEach(item=>{if(params.row.payment_id==item.value){_payment_name=item.label}})
						return h('div',[
							h('span', {}, _payment_name),
						])
					}
				},
				{title: '类型',key: 'type_id',
					render: (h, params) => {
						return h('div',[
							h('span', {
								class: 1==params.row.type_id?'info':'draft',
							}, 0==params.row.type_id?'线下':'线上'),
						])
					}
				},
				{title: '手续费',key: 'fee'},
				{title: '备注',key: 'memo'},
				{
					title: '动作',
					key: 'action',
					align: 'left',
					fixed: 'right',
					width:180,
					render: (h, params) => {
						return h(
							'div',
							this.$refs.vTable.$scopedSlots.action({ 'params': params })
						)
					}
				}

			],
		}
	},
	methods:{
		init:function(){

			
			let self=this
			self.tableLoading=true
			function action1(){return self.$http.get("/v1/wallet/recharge/payments",{params: { 'token': self.token }})}
			function action2(){return self.$http.get("/v1/wallet/recharges",{params: { 'token': self.token }})}
			
			self.$http.all([action1(),action2()])
			.then(self.$http.spread(function (response1,response2){
				if(200==response1.data.status && 0==response1.data.code){
					response1.data.data.forEach(item=>{
						self.paymentList.push({value: item.id,label: item.name})
					})
				}else{self.$Message.error(response1.data.message)}
				if(200==response2.data.status && 0==response2.data.code){
					self.vData=response2.data
				}else{self.$Message.error(response2.data.message)}
				
				self.tableLoading=false
			})).catch(self.$http.spread(function (error1,error2) {
				self.tableLoading=false
			}))

		},
		changePage:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/wallet/recharges",{params: { 'token': self.token, page:self.vData.page, pageSize: self.vData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey}}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.vData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info(error.message);
				self.tableLoading=false
			})
		},
		changePageSize:function(val){
			let self=this
			self.vData.pageSize=val
			self.tableLoading=true
			self.$http.get("/v1/wallet/recharges",{params: { 'token': self.token, page:1, pageSize: self.vData.pageSize}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.vData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info( error.message);
				self.tableLoading=false
			})
		},
		changeStatus:function(uid,statusId,index){
			let self=this
			self.tableLoading=true
			self.$http.post("/v1/wallet/recharges?_method=put&token="+self.token,{'id':uid,'data':'{"status":"'+parseInt(statusId)+'"}'})
			.then(function(response){
				self.tableLoading=false
				if(200==response.data.status && 0==response.data.code)
				{
					if(3==statusId){self.vData.data.splice(index,1)}
					else{self.vData.data[index].status=statusId}
					self.$Message.success('操作成功');
				}else{
					self.$Message.error(response.data.message)
					self.init()
				}
			}).catch(function(error){
				self.$Message.error( error.message)
				self.tableLoading=false
			})
		},
		search:function(){
			let self=this
			self.tableLoading=true
			self.$http.get("/v1/wallet/recharges",{params: { 'token': self.token, page:1, pageSize: self.vData.pageSize
			,search:{filterKey:self.filterKey,key:self.key,statusKey:self.statusKey,uid:self.uidKey}
			}})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.vData=response.data
				}
				self.tableLoading=false
			}).catch(function(error){
				this.$Message.info( error.message);
				self.tableLoading=false
			})

		},
		onSelectUser:function(){
			this.showBox=true
		},
		onListenerChange:function(obj){
			this.uidKey=obj.uid
			this.realname=obj.realname
		},
		onRowEdit(id){this.$router.push({path:'/wallet/recharge/edit/'+id})},
		onRowDelete(id,index){
			this.$Modal.confirm({
				title: '温馨提示',
				content: '删除后不可恢复，确认删除？',
				onOk: () => {
					this.changeStatus(id,3,index)
				},
			})
		},
	},
	created:function(){
	},
	mounted () {
		this.init()
    	this.setTitle(this.title)
	},
	activated:function(){
		// this.init()
	},
	computed:{
		...mapGetters(['token']),
	},
	watch:{
		realname(curVal,oldVal){
			if(''==curVal){this.uidKey=null}
		}
	}
}



</script>
<style lang="less" scoped>
</style>